<template>
    <div>
       <div id="huadyanz" class="nc-container"></div>
    </div>
</template>
<script>

import {onMounted, reactive} from 'vue'
export default {
    setup(props,proxy) {
        onMounted(() =>{
         huad(proxy)
        })
        
        
         return {huad}
    },
}
//阿里云人机滑动验证
function  huad(proxy) {
    let obj =  reactive({
        nc_token:'',
        csessionid:'',
        sig:''
    })
     var nc_token = ["CF_APP_1",(new Date()).getTime(),Math.random()].join(':');
      var NC_Opt = {
        renderTo:"#huadyanz",
        appkey:"CF_APP_1",
        scene:"nc_login",
        token:nc_token,
        customWidth:300,
        trans:{"key1":"code0"},
        elementID:["usernameID"],
        is_Opt:0,
        language:"cn",
        isEnabled:true,
        timeout:3000,
        times:5,
        apimap:[],
        callback:function(data){
        //   window.console && console.log(nc_token)
        //   window.console && console.log(data.csessionid)
        //   window.console && console.log(data.sig)
            
                 obj.nc_token = nc_token
                 obj.csessionid=data.csessionid,
                 obj.sig = data.sig
                
                 proxy.emit('onBack',obj)
        }
      }
      var nc = new noCaptcha(NC_Opt)
      nc.upLang('cn',{
        _startTEXT:"请按住滑块,拖动到最右边",
        _yesTEXT:"验证通过",
        _error300:"哎呀,出错了,点击<a href=\"javascript:_nc.reset()\">刷新</a>再来一次",
        _errorNetwork:"网络不给力,请<a href=\"javascript:_nc.reset()\">点击刷新</a>"
      })
  
}
</script>
